<script setup>
import { defineProps, computed } from 'vue'
import { useRouter } from 'vue-router'
import goBackIcon from '/img/goback.png' // 引入返回图标
const emit = defineEmits(['update:startPoint', 'update:endPoint', 'clear-points'])

const router = useRouter()

const props = defineProps({
  visible: Boolean,
  startPoint: Object,
  endPoint: Object,
})
function handleEndInputClick() {
  // 跳转至搜索页并携带参数
  router.push({
    path: '/search', // ✅ 替换为实际路由路径
  })
}
function handleBack() {
  // 1. 触发清除事件
  emit('clear-points')
  const currentPath = router.currentRoute.value.path
  // 2. 更新 URL（假设 startPoint.id 存在）
  if (localStorage.getItem("currentRoomDoorNum")) {
    localStorage.removeItem('mapData')
    router.push({
      path:currentPath,
      query: { id: localStorage.getItem("currentRoomDoorNum") },// 保留起点 ID

    })
  }
}

function updateStartRoomName(event) {
  const newRoomName = event.target.value
  emit('update:startPoint', { ...props.startPoint, roomName: newRoomName })
}

function updateEndRoomName(event) {
  const newRoomName = event.target.value
  emit('update:endPoint', { ...props.endPoint, roomName: newRoomName })
}
</script>

<template>
  <div v-if="visible" class="top-drawer">
    <!-- 左侧返回按钮 -->
    <div class="drawer-left">
      <div class="back-btn" @click="handleBack" role="button" tabindex="0" aria-label="返回">
        <img :src="goBackIcon" alt="返回" class="back-icon" />
      </div>
    </div>

    <!-- 中间显示房间名 -->
    <div class="drawer-center">
      <div class="location-item">
        <span class="dot green-dot"></span>
        <input
            type="text"
            :value="startPoint?.roomName || ''"
            @input="updateStartRoomName"
            placeholder="请输入起点房间"
            class="location-input"
            disabled
        />
      </div>
      <!-- 分隔线 -->
      <div class="divider"></div>
      <div class="location-item">
        <span class="dot red-dot"></span>
        <input
            type="text"
            :value="endPoint?.roomName || ''"
            @input="updateEndRoomName"
            placeholder="请输入终点房间"
            class="location-input"
            @click="handleEndInputClick"
        />
      </div>
    </div>


<!--    &lt;!&ndash; 右侧按钮 &ndash;&gt;-->
<!--    <div class="drawer-right">-->
<!--      <button class="refresh-btn">-->
<!--        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">-->
<!--          <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>-->
<!--        </svg>-->
<!--      </button>-->
<!--    </div>-->
  </div>
</template>



<style scoped>
.divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); /* 浅灰色线条 */
  margin: 0px 0;
}

.top-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 60px;
  background: #f5f5f5; /* 浅灰色背景 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  animation: slideDown 0.3s ease forwards;
  padding: 0px 0;
}

.drawer-left {
  width: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 15px;
}

.drawer-right {
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drawer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
}

.location-item {
  display: flex;
  align-items: center;
  font-size: 16px; /* 增加字体大小 */
  color: #333;
  margin: 5px 0;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}

.green-dot {
  background-color: green;
}

.red-dot {
  background-color: red;
}

.location-input {
  font-size: 16px;
  line-height: 1.6;
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  padding: 0;
  margin: 0;
  color: #333; /* 明确设置文本颜色 */
  -webkit-text-fill-color: #333; /* iOS 兼容性 */
  opacity: 1; /* 确保不透明度为1 */
}

/* 针对 disabled 状态的输入框 */
.location-input:disabled {
  color: #333; /* 保持与启用状态相同的颜色 */
  -webkit-text-fill-color: #333; /* iOS 兼容性 */
  opacity: 1; /* 覆盖 iOS 的默认透明度 */
  -webkit-opacity: 1; /* iOS 兼容性 */
}

/* iOS 特定样式 */
@supports (-webkit-touch-callout: none) {
  .location-input:disabled {
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
  }
}

.back-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 3px;
  cursor: pointer;
  outline: none;
  border: none;
  margin-left: 8px;

  /* 确保在所有设备上都显示为圆形 */
  flex-shrink: 0;
  box-sizing: border-box;

  /* 添加焦点和交互状态 */
  transition: background-color 0.2s ease;
}

.back-btn:focus,
.back-btn:active {
  outline: none;
  background-color: #f5f5f5;
}

/* 确保可访问性 */
.back-btn[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

.back-btn[role="button"]:focus {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(66, 133, 244, 0.5);
}



.back-icon {
  width: 30px;
  height: 30px;
  display: block;
}

.refresh-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border: none;
}

.refresh-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  color: #666;
  transition: color 0.2s ease;
}

.refresh-btn:hover svg {
  color: #007aff;
}

@keyframes slideDown {
  from {
    transform: translateY(-60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>


